<template>
  <div v-if="!item.meta || !item.hidden">
    <!-- 只包含一个子路由节点的路由，显示其【唯一子路由】 -->
    <template
      v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)"
    >
      <!-- 只包含一个子路由节点的路由，显示其【唯一子路由】 -->
      <template v-if="!item.hidden">
        <a-sub-menu v-if="item?.meta?.title !== onlyOneChild?.meta?.title" :key="item.path">
          <template #icon><span :class="'iconfont ' + item?.meta?.icon"></span></template>
          <template #title>
            {{ item?.meta?.title }}
          </template>
          <a-menu-item :key="onlyOneChild.noShowingChildren ? fullPath : onlyOneChild.path" v-if="!item.hidden">
            <template #icon><span :class="'iconfont ' + onlyOneChild?.meta?.icon"></span></template>
            {{ onlyOneChild.meta?.title }}
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item v-else :key="onlyOneChild.noShowingChildren ? fullPath : onlyOneChild.path">
          <template #icon><span :class="'iconfont ' + onlyOneChild?.meta?.icon"></span></template>
          {{ onlyOneChild.meta?.title }}
        </a-menu-item>
      </template>
    </template>
    <!-- 包含多个子路由  -->
    <a-sub-menu v-else :key="fullPath + 1">
      <template #icon><span :class="'iconfont ' + item?.meta?.icon"></span></template>
      <template #title>
        {{ item?.meta?.title }}
      </template>
      <sidebar-item v-for="child in item?.children" :key="child.path" :item="child" :parent-path="fullPath" />
    </a-sub-menu>
  </div>
</template>

<script setup>
import SidebarItem from './index.vue'
import { computed, ref } from 'vue'

const props = defineProps({
  item: Object,
  parentPath: String,
})

const onlyOneChild = ref() // 临时变量，唯一子路由

/**
 * 判断当前路由是否只有一个子路由
 *
 * 1：如果只有一个子路由： 返回 true
 * 2：如果无子路由 ：返回 true
 *
 * @param children 子路由数组
 * @param parent 当前路由
 */
function hasOneShowingChild(children = [], parent) {
  // 需要显示的子路由数组
  const showingChildren = children.filter((item) => {
    if (item.hidden) {
      return false // 过滤不显示的子路由
    } else {
      onlyOneChild.value = item // 唯一子路由赋值（多个子路由情况 onlyOneChild 变量是用不上的）
      return true
    }
  })

  // 1：如果只有一个子路由, 返回 true
  if (showingChildren.length === 1) {
    return true
  }

  // 2：如果无子路由, 复制当前路由信息作为其子路由，满足只拥有一个子路由的条件，所以返回 true
  if (showingChildren.length === 0) {
    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
    return true
  }
  return false
}

const fullPath = computed(() => {
  let path = props.item.path.startsWith('/') ? props.item.path.substr(1) : props.item.path
  // path = props.parentPath + '/' + path
  path = '/' + path
  return path.replaceAll('//', '/')
})
</script>
<style scoped lang="less">
:deep(.arco-menu-icon) {
  display: inline-block;
  margin-right: @size-4;
}
</style>
